<!doctype html><!--声明文档类型：html-->
<html lang="en">
	<head><!--头部-->
		<meta charset="UTF-8"><!--字符编码:utf-8国际编码-->
		<meta name="Keywords" content="关键词1,关键词2"><!--关键词-->
		<meta name="Description" content="描述"><!--描述-->
		<title>电子名片系统-玄武老师</title><!--网页标题-->
		<style>/* css样式 */
			*{/* 通配符: 选择到所有的标签元素*/
				margin:0;/*外边距*/
				padding:0;/*内边距*/
			}
			body{
				background:url("images/1.jpg") center top;
			}
			#box{/* # id选择器*/
				width:830px;/*宽度*/
				height:300px;/*高度*/
				/* background:#ccc;背景颜色 */
				margin:100px auto;/*上下为100px 左右自动(居中)*/
			}
			.info{/* . class类选择器 */
				float:left;/*左浮动:漂浮起来*/
				width:480px;
				height:300px;
				/*border:2px solid red;边框线: 宽度 类型(实心) 颜色*/

			}
			.qrcode{
				float:right;
				width:265px;
				height:265px;
				border:2px solid red;
			}
			.info ul li{/*混合选择器*/
				float:left;
				list-style:none;/*去除前面的小黑圆点*/
				width:200px;
				height:40px;
				background:#333;
				margin:10px 20px;
				color:#fff;/*文字颜色*/
				border-radius:10px;/*圆角属性*/
				overflow:hidden;/*超出隐藏*/
				text-align:center;/*左右对齐方式: 居中*/
				line-height:40px;/*行高*/
			}
			.info ul li span{
				float:left;
				width:50px;
				height:40px;
			}
			.info ul li input{
				float:left;
				width:150px;
				height:40px;
				border:0;/*去除默认的边框 低版本IE不支持none*/
				background:#000;
				color:#fff;
				outline:0;/*轮廓*/
				text-indent:10px;/*首行缩进*/
			}
			.info ul li.btn{
				width:440px;
				background:#00ff33;
				cursor:pointer;/*鼠标手的形状*/
			}
		</style>
	</head>
	<body><!--身体-->
		<!--div盒子模型标签 宽度 高度 位置 边框(css样式)-->
		<div id="box"><!--id="自定义的名称" 唯一的(身份证号) 命名规范(见名知意:有语义的英文单词)-->
			<!--class类名 可重复的(姓名)-->
			<div class="info">
				<ul><!--无序列表标签-->
					<li>
						<span>姓名</span>
						<input type="text" id="name">
					</li>
					<li>
						<span>公司</span>
						<input type="text" id="company">
					</li>
					<li>
						<span>职务</span>
						<input type="text" id="title">
					</li>
					<li>
						<span>地址</span>
						<input type="text" id="address">
					</li>
					<li>
						<span>手机</span>
						<input type="text" id="mobile">
					</li>
					<li>
						<span>邮箱</span>
						<input type="text" id="email">
					</li>
					<li>
						<span>网址</span>
						<input type="text" id="web">
					</li>
					<li>
						<span>备注</span>
						<input type="text" id="desc">
					</li>
					<li class="btn">开启通讯录</li>
				</ul>
			</div>
			<div class="qrcode" id="qrcode"></div>
		</div>
		<script src="js/jquery.min.js"></script>
		<script src="js/qrcode.js"></script>
		<script>
			/*
				第一步:获取文本框的内容
				第二步:生成二维码
				第三步:实现电子名片
			*/
			
			//定义变量来存储获取的内容
			var name,company,title,address,mobile,email,web,desc;

			//$(".btn")获取点击按钮
			$(".btn").click(function(){
				//第一步:获取文本框的内容
				name = "FN:" + $("#name").val() +"\n";
				company = "ORG:" + $("#company").val() +"\n";
				title = "TITLE:"+$("#title").val() +"\n";
				address = "ADR;WORK:"+$("#address").val() +"\n";
				mobile = "TEL:"+$("#mobile").val() +"\n";
				email = "EMAIL:"+$("#email").val() +"\n";
				web = "URL:"+$("#web").val() +"\n";
				desc = "NOTE:"+$("#desc").val() +"\n";
				//把获取到的内容拼接在一起
				var info = "BEGIN:VCARD\n"+name+company+title+address+mobile+email+web+desc+"END:VCARD";
				//console.log(info)//在控制台输出
				//第二步：生成二维码
				//先清空
				$("#qrcode").html('');
				//创建一个二维码对象
				var qrcode = new QRCode("qrcode");
				qrcode.makeCode(info);

				//第三步:实现电子名片
				//给相应的信息加上手机能够识别的标识
			})
		</script>
	</body>
</html>
